<template>
  <div>
    <div v-if="collectItem.type === 1" class="collectProject" ﻿@tap="toProjectDetail(collectItem.item_id, collectItem.project_status)">
      <img :src="picPre + collectItem.project_pic" alt="">
      <div class="collectProject-content" >
        <h1>{{collectItem.project_name}}</h1>
        <p><span class="tags" v-for="(item,index) in collectItem.tags" :key="index">{{item.title}}</span></p>
        <p class="actor-box">演员阵容：<span class="actor" v-for="(item,index) in collectItem.actor_list" :key="index">{{item.name}}</span></p>
        <p>{{collectItem.release_time}}上映</p>
      </div>
      <i class="iconfont iconshoucang" ﻿@tap.stop="delCollect(1, collectItem.item_id)" style="font-size: 36rpx;color: #EF5A56;"></i>
    </div>
    <div v-else class="comment-module" ﻿@tap="toDetail(collectItem.posts_id, collectItem.posts_status)">
      <item :item="collectItem" :jurisdiction="false" :isCollectPage="true" @delCollect="delCollect"></item>
    </div>
  </div>

</template>

<script>
  import item from '@/components/comment/item'
    export default {
      name: "index",
      components: {
        item
      },
      props:{
        collectItem:{
          type:Object
        }
      },
      data(){
        let that = this;
        return {
          picPre: that.$api.picPre
        }
      },
      methods:{
        toDetail(id, status){
          if(status === 1) {
			  uni.navigateTo({
			  	url: '/movie/postDetails?id=' + id
			  })
          } else {
            ﻿uni.showToast({
              title: '发帖信息不存在',
              icon: 'none',
              duration: 2000
            })
          }
        },
        toProjectDetail(id, status){
          if(status === '1'){
			  uni.navigateTo({
			  	url: '/project/detail?id='+id
			  })
          } else {
            ﻿uni.showToast({
              title: '项目信息不存在',
              icon: 'none',
              duration: 2000
            })
          }
        },
        // 取消收藏
        delCollect(type, id){
          if(type === 1){
            this.$ajax
              .post(this.$api.projectCollect, {item_id: id, is_collect: 2})
              .then(() => {
                this.$emit("delCollect", id, type)
              })
              .catch(err => {
                ﻿uni.showToast({
                  title: err,
                  icon: 'none',
                  duration: 2000
                })
              });
          } else {
            this.$emit("delCollect", id, type)
          }
        }
      }
    }
</script>

<style scoped>
.collectProject{
  padding: 30rpx 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 14rpx solid #F7F7F7;
}
.collectProject>img{
  width: 127rpx;
  height: 180rpx;
  border-radius: 6rpx;
}
  .collectProject-content{
    padding: 17rpx 0 0 20rpx;
    box-sizing: border-box;
    flex: 1;
  }
.collectProject-content>h1{
  font-size: 30rpx;
  color: #323232;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.collectProject-content>p{
  font-size: 24rpx;
  color: #909090;
  font-weight: bold;
  margin-bottom: 9rpx;
}

.comment-module{
  padding: 30rpx 0 0 0;
}
.commentMd-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.commentMd-title>img{
  width: 64rpx;
  height: 64rpx;
  margin-right: 20rpx;
}
.commentMd-title>div{
  flex: 1;
}
.commentMd-title>div>p:first-child{
  font-size: 24rpx;
  color: #7A7A7A;
}
.commentMd-title>div>p:last-child{
  color: #ADADAD;
  font-size: 20rpx;
}
.commentMd-content{
  display: flex;
  justify-content: space-between;
  margin-top: 21rpx;
}
.commentMd-content > img{
  width: 164rpx;
  height: 117rpx;
  border-radius: 6rpx;
}
.commentMd-content>div{
  font-size: 30rpx;
  color: #323232;
  width: 63.5%;
  font-weight: bold;
  padding-top: 28rpx;
}
.commentMd-contentFont>div{
  width: 100%;
}
.commentMd-contentFont>img{
  width: 0;
  height: 0;
}
.commentMd-content>div>p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.commentMd-footer{
  display: flex;
  margin-top: 30rpx;
  border-bottom: 14rpx solid #F7F7F7;
  padding-bottom: 22rpx;
}

.commentMd-footer>div{
  display: flex;
  align-items: center;
}
.commentMd-footer>div:last-child{
  margin-left: 55rpx;
}
.commentMd-footer>div:first-child{
  margin-right: 55rpx;
}
.commentMd-footer>div>p{
  font-size: 22rpx;
  color: #323232;
  margin-left: 20rpx;
}
.like{
  color: #56A2EF !important;
}
.collect{
  color: #EF5A56 !important;
}
.notLike{
  color: #323232;
}
.tags:after{
  content: '/';
}
.tags:last-child:after{
  content: '';
}
.actor:after{
  content: ' ';
}

.actor:last-child:after{
  content: '';
}
  .actor-box{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #494949;
    font-size:24rpx;
  }
</style>
